<template>
  <div v-if="page_fresh">
    <!-- 设备标签 -->
    <div class="device-info">
      <div class="device-property">
        设备名称：
        {{ devicetab.device_name }}
      </div>
      <div class="device-property">
        商户号：
        {{ device.business_id }}
      </div>
      <div class="device-property">
        序列号：
        {{ device.device_id }}
      </div>
    </div>

    <div class="device-actions">
      <input type="button" value="删除" @click="remove_device()">
      <input type="button" value="修改" @click="change_device()">
      <input type="button" :value="collect" @click="collect_click()">
    </div>

    <div v-show="remove_show" class="confirmation-message">
      是否要删除？
      <input type="button" value="确定" @click="remove_de()">
      <input type="button" value="取消" @click="remove_de_quit()">
    </div>

    <div v-show="change_show" class="change-device-form">
      <div class="form-field">
        修改后的名称：
        <input type="text" ref="name">
      </div>
      <div class="form-actions">
        <input type="button" value="确定" @click="change_de()">
        <input type="button" value="取消" @click="change_de_quit()">
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/api/request';

export default {
  created() {
    this.CHUSHIHUA()
  },
  props: {
    device: {
      required: true
    }
  },
  data() {
    return {
      remove_show: false,
      change_show: false,
      devicetab: {
        device_name_id: this.device.id,
        device_name: this.device.device_name,
        business_id: this.device.business_id,
        device_id: this.device.device_id,
        device_collect: this.device.collect_run
      },
      collect: null,
      page_fresh: true
    };
  },
  methods: {
    CHUSHIHUA() {
      if (this.devicetab.device_collect === '1') {
        this.collect = "停止采集数据";
      }
      if (this.devicetab.device_collect === '0') {
        this.collect = "开始采集数据";
      }
    },
    collect_click() {
      if (this.collect === "开始采集数据") {
        this.collect = "停止采集数据";
        request.get('http://localhost:5000/collect/start?deviceId=' + this.devicetab.device_name_id);
      } else {
        this.collect = "开始采集数据";
        request.get('http://localhost:5000/collect/stop?deviceId=' + this.devicetab.device_name_id);
      }
    },
    remove_device() {
      this.remove_show = !this.remove_show;
      if (this.remove_show) {
        this.change_show = false
      }
    },
    remove_de() {
      request.get('http://localhost:5000/device/remove?id=' + this.devicetab.device_name_id).then(function (response) {
        if (response.data) {
          alert("删除成功");
        }
      }.bind(this));
      this.remove_show = false;
      this.page_fresh = false
    },
    remove_de_quit() {
      this.remove_show = false;
    },
    change_device() {
      this.change_show = !this.change_show;
      if (this.change_show) {
        this.remove_show = false
      }
    },
    change_de() {
      this.devicetab.device_name = this.$refs.name.value;
      request.get('http://localhost:5000/device/change?id=' + this.devicetab.device_name_id + '&device_name=' + this.$refs.name.value).then(function (response) {
        if (response.data) {
          alert("修改成功");
        }
      }.bind(this));
      this.change_show = false;
    },
    change_de_quit() {
      this.change_show = false;
    }
  }
};
</script>

<style scoped>
.device-info {
  margin-bottom: 10px;
}

.device-property {
  margin-bottom: 5px;
}

.device-actions {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
}

.confirmation-message {
  margin-top: 10px;
}

.change-device-form {
  margin-top: 10px;
}

.form-field {
  margin-bottom: 5px;
}

.form-actions {
  margin-top: 10px;
}
</style>
